<template>
  <div class="commentsFooter">
    <!------------------------------------------------------------->
    <!-- 整体评论区域 -->
    <div class="comments_block" v-if="type == 1">
      <div class="pl" @click="to_type2">写评论..</div>
      <div class="right">
        <span
          class="comments_list iconfont iconpinglun-"
          @click="$router.push({ path: '/comment/' + post.id })"
        >
          <span class="comments_num">{{ post.comment_length }}</span>
        </span>
        <span
          class="star iconfont iconshoucang"
          @click="handle_star"
          :class="{ active: star_active }"
        ></span>
        <span class="share iconfont iconfenxiang"></span>
      </div>
    </div>

    <!-- 发表评论 -->
    <div class="fabiao_conment" v-if="type == 2">
      <textarea
        class="textarea"
        v-model="textarea"
        @blur="to_type1"
        ref="textarea"
      ></textarea>
      <button @click="publicComment">发送</button>
    </div>
    <!------------------------------------------------------------->
  </div>
</template>

<script>
// public_post_comment(发表评论)
import { public_post_comment } from "@/apis/post.js";

export default {
  props: {
    // 块显示切换
    props_type: {
      type: Number,
      default: 1,
    },
    post: {
      type: Object,
    },
    // 是否收藏
    star_active: {
      type: Boolean,
    },
    // 回复id
    ReplyId: {
      type: Number,
      default: null,
    },
    textarea_ReplyUser_nickname: {
      type: String,
    },
  },
  // 数据：
  data() {
    return {
      type: this.props_type,
      textarea: "",
      textarea_Txt: "",
    };
  },
  // 方法/函数：
  methods: {
    handle_star(e) {
      this.$emit("click_star", { e });
    },

    to_type2() {
      this.type = 2;
      // 给文本域 聚焦
      setTimeout(() => {
        this.$refs.textarea.focus();
      }, 0);
    },
    to_type1() {
      setTimeout(() => {
        this.type = 1;
      }, 0);
    },

    // 发表评论：
    async publicComment() {
      // console.log(this.textarea);
      console.log(this.post);
      let res;
      // 如果有回复id, 就多加一个回复id参数
      if (this.ReplyId) {
        res = await public_post_comment(this.post.id, {
          content: this.textarea,
          parent_id: this.ReplyId,
        });
      } else {
        // 否则就不加
        res = await public_post_comment(this.post.id, {
          content: this.textarea,
        });
      }

      // console.log(res);
      this.$toast(res.data.message);

      this.$emit("reLoad");
    },
  },
  // 钩子：
  mounted() {
    // console.log(this.post);
  },
  // 侦听器：
  watch: {
    type() {
      // this.$refs.value == 666;
      if (this.type == 2) {
        // 给文本域 聚焦
        setTimeout(() => {
          // 如果是回复别人, 将回复的用户的昵称赋在文本域中
          if (this.ReplyId) {
            this.$refs.textarea.value = this.textarea_ReplyUser_nickname;
          }
          this.$refs.textarea.focus();
        }, 0);
      }
    },
  },
};
</script>


// 样式:
<style lang="less" scoped>
// 整体评论区域样式：
.comments_block {
  background-color: rgb(242, 242, 242);
  height: 50 * 100vh / 750;
  padding: 4px 10px;
  //   background-color: pink;
  display: flex;
  .pl {
    width: 62%;
    height: 40 * 100vh / 750;
    line-height: 40 * 100vh / 750;
    margin-left: 5px;
    margin-right: 30px;
    background-color: rgb(215, 215, 215);
    border-radius: 20 * 100vh / 750;
    font-size: 14px;
    padding: 0 20px;
    color: #555;
  }
  .right {
    //  background-color: red;
    width: 38%;
    height: 40 * 100vh / 750;
    display: flex;
    //  padding-left: 10px;
    > span {
      flex: 1;
      font-size: 24px;
      line-height: 40 * 100vh / 750;
      text-align: center;
      color: #777;
    }
    span.comments_list {
      position: relative;
      font-size: 28px;
      span.comments_num {
        position: absolute;
        top: 0;
        left: 0;
        background-color: red;
        border-radius: 10px;
        font-size: 10px;
        color: white;
        padding: 0 6px;
        height: 16px;
        line-height: 16px;
      }
    }
    .star.active {
      transition: all 0.2s;
      color: rgb(255, 187, 0);
    }
  }
}

// 发表评论：
.fabiao_conment {
  background-color: rgba(242, 242, 242, 0.363);
  display: flex;
  .textarea {
    width: 70%;
    height: 150 * 100vh / 750;
    border-radius: 10px;
    background-color: #f6f6f6;
    padding: 10px 6px;
    margin-left: 4px;
    margin-bottom: 4px;
  }
  button {
    background-color: red;
    outline: none;
    border: none;
    border-radius: 14px;
    width: 150 * 100vw / 750;
    height: 40px;
    color: white;
    margin-left: 5px;
    margin-top: 130 * 100vh / 750;
  }
}
</style>